<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header">
        <div class="container">
          <div class="demo-input-suffix acea-row">
            <el-form ref="tableFormRef" inline size="small" label-width="100px">
              <el-form-item label="姓名：" prop="real_name">
                <el-input v-model="tableForm.real_name" placeholder="请输入姓名" class="selWidth" @keyup.enter.native="getList(1)">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
                </el-input>
              </el-form-item>
              <el-form-item label="身份证号：" prop="card_id">
                <el-input v-model="tableForm.card_id" placeholder="请输入身份证号码" class="selWidth" @keyup.enter.native="getList(1)">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
                </el-input>
              </el-form-item>
              <el-form-item label="手机号：" prop="phone">
                <el-input v-model="tableForm.phone" type="number" maxlength="11" placeholder="请输入手机号" class="selWidth" @keyup.enter.native="getList(1)">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <el-button size="small" type="primary" @click="setTitle('添加')">添加黑名单</el-button>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="small"
      >
        <el-table-column prop="real_name" label="姓名" width="150" />
        <el-table-column prop="card_id" label="身份证号" width="200" />
        <el-table-column prop="phone" label="手机号" width="200" />
        <el-table-column prop="memo" label="原因" min-width="100" />
        <el-table-column fixed="right" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editTableItem(scope.row)">编辑</el-button>
            <el-button type="text" size="small" style="color: red;" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableForm.limit"
          :current-page="tableForm.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!--详情-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="400px"
      @closed="resetRef()"
    >
      <el-form
        ref="editFormRef"
        :model="editFormData"
        label-width="80px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item
          prop="real_name"
          label="姓名"
        >
          <el-input v-model="editFormData.real_name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item
          prop="card_id"
          label="身份证号"
        >
          <el-input v-model="editFormData.card_id" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item
          prop="phone"
          label="手机号"
        >
          <el-input v-model="editFormData.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item
          prop="memo"
          label="原因"
        >
          <el-input v-model="editFormData.memo" placeholder="请输入原因" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitDialogForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { getBlackList, updateBlackList, deleteBlackList } from '@/api/phone.js'
export default {
  name: 'BlackList',
  data() {
    /**
         * 验证手机号码
         */
    const checkPhone = (rule, phone, callback) => {
      var reg = /^1(3|4|5|6|7|8|9)\d{9}$/
      if (reg.test(phone)) {
        callback()
      } else {
        return callback(new Error('请输入正确的手机号'))
      }
    }
    // 检查号码是否符合规范，包括长度，类型
	    const isCardNo = (rule, card, callback) => {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/
      if (reg.test(card) === false) {
        return callback(new Error('请输入正确的身份证号码'))
      } else {
        callback()
      }
	    }
    return {
      tableData: {
        data: [],
        total: 0
      },
      tableForm: {
        page: 1,
        limit: 20,
        card_id: '',
        real_name: '',
        phone: ''
      },
      editFormData: {
        id: '',
        card_id: '',
        real_name: '',
        phone: '',
        memo: ''
      },
      specsInfo: {},
      dialogVisible: false,
      dialogTitle: '',
      listLoading: false,
      rules: {
        real_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        card_id: [{ required: true, validator: isCardNo, trigger: 'blur' }],
        phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
        memo: [{ required: true, message: '请输入原因', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getList('')
  },
  methods: {
    // 列表
    async getList(num) {
      this.tableForm.page = num || 1
      getBlackList(this.tableForm).then((res) => {
        this.tableData.data = res.data.list
        this.tableData.total = res.data.count
      }).catch((err) => {
        console.log(err)
      })
    },
    pageChange(page) {
      this.tableForm.page = page
      this.getList(page)
    },
    resetRef() {
      this.$nextTick(() => {
        this.$refs['editFormRef'].resetFields()
        this.editFormData.id = ''
      })
    },
    handleSizeChange(val) {
      this.tableForm.limit = val
      this.getList('')
    },
    setTitle(name) {
      this.dialogTitle = name
      this.dialogVisible = true
    },
    editTableItem(row) {
      this.dialogTitle = '编辑'
      this.editFormData.id = row.id
      this.editFormData.real_name = row.real_name
      this.editFormData.phone = row.phone
      this.editFormData.card_id = row.card_id
      this.editFormData.memo = row.memo
      this.dialogVisible = true
    },
    deleteItem(row) {
      this.$confirm(`确认将${row.real_name}移出黑名单？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteBlackList(row.id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        await this.getList(1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    submitDialogForm() {
      this.$refs['editFormRef'].validate((valid) => {
        if (valid) {
          updateBlackList(this.editFormData).then((res) => {
            this.$message({
              type: 'success',
              message: res.message
            })
            this.getList(1)
            this.dialogVisible = false
          }).catch((res) => {
            this.$message({
              type: 'error',
              message: res.message
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
